<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="class">
    <input type="text" placeholder="请输入名字" v-model="name" />
    <input type="text" placeholder="请输入分数" v-model.number="num" />
    <button @click="add()">添加</button><br /><br />
    <input type="text" placeholder="请输入名字" v-model="studentName" />
    <button @click="search()">搜索</button>
    <table border="1" v-show="!show">
      <thead>
        <tr>
          <th>ID</th>
          <th>名字</th>
          <th>分数</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in arr" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.num}}</td>
          <td>
            <button @click="arr.splice(arr.indexOf(item), 1)">删除</button>
            <button @click="change(item)">修改分数</button>
          </td>
        </tr>
      </tbody>
    </table>
  
    <table border="1" v-show="show">
      <thead>
        <tr>
          <th>ID</th>
          <th>名字</th>
          <th>分数</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredStudents" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.num}}</td>
          <td>
            <button @click="arr.splice(arr.indexOf(item), 1)">删除</button>
            <button @click="change(item)">修改分数</button>
          </td>
        </tr>
      </tbody>
    </table>
  
    <button @click="arr.sort((a, b) => b.num - a.num)">成绩从大到小</button>
    <button @click="arr.sort((a, b) => a.num - b.num)">成绩从小到大</button
    ><br /><br />
    <button @click="filterStudents('pass')">筛选及格学生</button>
    <button @click="filterStudents('fail')">筛选不及格学生</button>
    <button @click="filterStudents('all')">显示全部学生</button>
    <h1>
      <button @click="total = Number(arr.reduce((a, b) => a + b.num, 0))">
        计算总分
      </button>
      {{total}}<br />
      <button @click="average = total / arr.length">计算平均分</button>
      {{average}}
    </h1>
  </div>
  <script>
    new Vue({
      el: "#class",
      data: {
        arr: [
          {
            id: 1,
            name: "张三",
            num: 90,
          },
          {
            id: 2,
            name: "李四",
            num: 30,
          },
          {
            id: 3,
            name: "王五",
            num: 40,
          },
          {
            id: 4,
            name: "赵六",
            num: 100,
          },
        ],
        show: false,
        total: 0,
        average: 0,
        name: "",
        num: "",
        studentName: "",
        filteredStudents: [],
      },
      methods: {
        // 添加学生
        add() {
          if (this.name && this.num) {
            this.arr.push({
              id: this.arr.length + 1,
              name: this.name,
              num: this.num,
            });
            this.name = "";
            this.num = "";
          } else {
            alert("名字和分数不能为空");
          }
        },
        // 修改学生分数
        change(item) {
          item.num = prompt("请输入新的分数", Number(item.num));
        },
  
        //  搜索学生
        search() {
          let result = this.arr.indexOf(
            this.arr.find((item) => item.name == this.studentName)
          );
          if (result === -1) {
            alert("没有找到该学生");
          } else {
            alert(this.studentName + "的分数为：" + this.arr[result].num);
          }
        },
  
        //   筛选学生
        filterStudents(type) {
          if (type === "pass") {
            this.filteredStudents = this.arr.filter(
              (student) => student.num >= 60
            );
            this.show = true;
          } else if (type === "fail") {
            this.filteredStudents = this.arr.filter(
              (student) => student.num < 60
            );
            this.show = true;
          } else {
            this.filteredStudents = this.arr;
            this.show = false;
          }
          this.filteredStudents = this.filteredStudents.filter((student) => {
            if (!this.studentName) {
              return true;
            }
            return student.name.includes(this.studentName);
          });
        },
      },
    });
  </script>
  <style>
    th,
    td {
      padding: 10px 30px;
      text-align: center;
    }
  </style>